<!DOCTYPE html>
<html>
<head>
    <title>Overview</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" data-title="Views">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Sources
            <ul>
                <li><a href="#secondview">Local View</a></li>
                <li><a href="../../content/mobile/view/remoteview.html">Remote View</a></li>
            </ul>
        </li>
    </ul>

    <ul data-role="listview" data-style="inset" data-type="group">
        <li>Types
            <ul>
                <li><a href="#stretchview">Stretched View</a></li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="view" id="secondview" data-layout="mobile-view" data-title="Local View">
    <div style="background: url(../../content/shared/images/patterns/pattern7.png); color: #fff; padding: 50px 0; text-align: center;"><p>Hi, I'm a local view.</p></div>
</div>

<div data-role="view" id="stretchview" data-layout="mobile-view" data-title="Stretched View" data-stretch="true">
    <div style="background: url(../../content/shared/images/patterns/pattern7.png); color: #fff; padding-top: 50px; text-align: center;"><p>Hi, I'm a stretched view.</p><p>Use me for full screen content that doesn't need scrolling.</p></div>
</div>

<div data-role="layout" data-id="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
        </div>
    </header>
</div>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
